<template>
  <Contextmenu ref="contextmenu" class="context-menu">
    <li v-show="netKing == 1 || netKing == 2" @click="handlePrview()">
      <span class="el-icon-view"></span>
      <span> 查看</span>
    </li>
    <li v-show="netKing == 1" @click="handleEdit">
      <span class="el-icon-edit"></span>
      <span> 编辑</span>
    </li>
    <li v-show="netKing == 1" @click="handleRename">
      <span class="el-icon-edit-outline"></span>
      <span> 重命名</span>
    </li>
    <li v-show="netKing == 1" @click="handleMove">
      <span class="el-icon-rank"></span>
      <span> 移动</span>
    </li>
    <li v-show="netKing != 3 && !isFolder" @click="handleLink">
      <span class="el-icon-link"></span>
      <span> 复制链接</span>
    </li>
    <li v-show="netKing == 1" @click="handleDelete">
      <span class="el-icon-delete"></span>
      <span> 删除</span>
    </li>
    <li
      v-show="(netKing == 1 || netKing == 2) && !isFolder"
      @click="handleDownload"
    >
      <span class="el-icon-download"></span>
      <span> 下载</span>
    </li>
    <li v-show="netKing == 3" @click="handleRecover">
      <span class="el-icon-refresh-left"></span>
      <span> 恢复</span>
    </li>
    <li v-show="netKing == 3" @click="handleRealDelete">
      <span class="el-icon-circle-close"></span>
      <span> 彻底删除</span>
    </li>
    <li @click="handleDetail">
      <span class="el-icon-document"></span>
      <span> 详情</span>
    </li>
  </Contextmenu>
</template>
<script>
import { mapGetters } from 'vuex'
import Contextmenu from 'vue-context-menu'
export default {
  components: {
    Contextmenu,
  },
  data() {
    return {
      king: 1,
      currentFile: {},
      userId: 1,
    }
  },
  computed: {
    ...mapGetters(['netKing']),
    //是否是文件夹
    isFolder() {
      return (
        this.currentFile.hasOwnProperty('isFolder') &&
        this.currentFile.isFolder == 1
      )
    },
  },
  mounted() {
    this.$bus.$on('openContextmenu', (item) => {
      this.currentFile = item
      this.$refs.contextmenu.open()
    })
  },
  beforeDestroy() {
    this.$bus.$off('openContextmenu')
  },
  methods: {
    //查看
    handlePrview() {
      let { isFolder, id } = this.currentFile
      if (isFolder == 1) {
        this.$bus.$emit('refreshTbNetDiskList', { pId: id })
        this.$bus.$emit('changeBread', this.currentFile)
      } else {
        //查看文件
        this.$bus.$emit('showPreview', this.currentFile)
      }
    },
    //编辑
    handleEdit() {
      if (this.isFolder) {
        this.$bus.$emit('createFolder', this.currentFile)
      } else {
        this.$bus.$emit('uploadFile', this.currentFile)
      }
    },
    //下载
    handleDownload() {
      this.$bus.$emit('downloadFile', this.currentFile)
    },
    //移动
    handleMove() {
      this.$bus.$emit('moveFile', this.currentFile)
    },
    //详情
    handleDetail() {
      this.$bus.$emit('detailFile', this.currentFile)
    },
    //恢复
    async handleRecover() {
      if (this.isFolder) {
        await this.$store.dispatch('recoveryDirTbNetDisk', this.currentFile)
      } else {
        await this.$store.dispatch('recoveryTbNetDisk', {
          id: this.currentFile.id,
          del: 1,
        })
      }
      this.$bus.$emit('refreshTbNetDiskList')
    },
    //假删除
    handleDelete() {
      this.deleteTips(async () => {
        if (this.isFolder) {
          await this.$store.dispatch('banDirTbNetDisk', this.currentFile)
        } else {
          await this.$store.dispatch('banTbNetDisk', {
            id: this.currentFile.id,
            del: 2,
          })
        }
        this.$bus.$emit('refreshTbNetDiskList')
      })
    },
    //彻底删除
    handleRealDelete() {
      this.deleteTips(async () => {
        if (this.isFolder) {
          await this.$store.dispatch('deleteDirTbNetDisk', this.currentFile)
        } else {
          await this.$store.dispatch('deleteTbNetDisk', this.currentFile)
        }
        this.$bus.$emit('refreshTbNetDiskList')
      }, '确定要彻底删除吗?')
    },
    //重命名
    handleRename() {
      this.$bus.$emit('showRenameInput', this.currentFile)
    },
    //复制链接
    handleLink() {
      this.$copyText(this.currentFile.httpUrl)
        .then(() => {
          this.successMsg('已成功复制到剪切板')
        })
        .catch(() => {
          this.errMsg('复制失败')
        })
    },
  },
}
</script>
<style scoped lang="scss">
.context-menu {
  .ctx-menu {
    min-width: 65px;
    font-size: 14px;
    li {
      padding-left: 20px;
      cursor: pointer;
      font-size: 14px;
      &:hover {
        color: #fff;
        background-color: #409eff;
      }
    }
  }
}
</style>